<%-- 
    Document   : video
    Created on : Jul 22, 2013, 8:45:08 PM
    Author     : ShahanThai
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<c:if test="${empty username}">
<jsp:include page="header.jsp"/>
</c:if>
<c:if test="${not empty username}">
<jsp:include page="header1.jsp"/>
</c:if>
<div class="m-left">

    <div id="fb-root"></div>
    <script>    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=419934814770318";
        fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));</script>

    <div class="left-cm">
        <div class="hotman">
            <div class="b1"></div>
            <div class="b2"></div>
            <div class="b3"></div>
            <div class="b4"></div>
            <div class="pad" style="padding-bottom: 10px">
                <c:forEach var="tmp" items="${SONG}" >
                    <c:set var="song" value="${tmp}" />
                </c:forEach>
                <c:forEach var="tmp" items="${UPLOADER}" >
                    <c:set var="uploader" value="${tmp}" />
                </c:forEach>
                <div class="h-main">
                    <div class="pl_top">
                        <div class="datelast" nowrap>
                            <img src="css/images/bh4.gif" title="Uploader" />
                            <span><a href="" class="gen">${uploader.users.username}</a></span>
                            <img src="css/images/bh1.gif" title="${song.listened}" />
                            <span>${song.listened}</span>
                            <a href="" target="_blank"><img src="css/images/bh3.gif" title="${song.downloaded}" /></a>
                            <span>${song.downloaded}</span>
                            <img src="css/images/tain5.gif" title="${uploader.uploadDate}" />
                        </div>
                        <!--div class="plt-text"><a href="">Video Clip</a> -&gt; <a href="">Hàn</a> -&gt; <a href="" title="Gentleman">Gentleman</a></div-->
                    </div>
                    <div class="pl_center">
                        <div class="pl-c2">

                            <div width="100%" align="center"></div>
                            <video width="320" height="240" controls>
                                <source src="<c:if test="${param.quality == 'l1'}" >${song.l1}</c:if><c:if test="${param.quality == 'l2'}" >${song.l2}</c:if><c:if test="${param.quality == 'l3'}" >${song.l3}</c:if><c:if test="${param.quality == 'l4'}" >${song.l4}</c:if>">


                            </video>

                            <table cellpadding="0" cellspacing="0" class="forumnone">
                                <tr>
                                    <td width="80%" nowrap>
                                        <div class="gen" style="margin: 3px 1px 1px 1px;">Chất lượng:  <a href="video.jsp?quality=l1"><img src="css/images/360p<c:if test="${param.quality == 'l1'}" >_l</c:if>.png" border="0"></a> <a href="video.jsp?quality=l2"><img src="css/images/480p<c:if test="${param.quality == 'l2'}" >_l</c:if>.png" border="0"></a> <a href="video.jsp?quality=l3"><img src="css/images/720p<c:if test="${param.quality == 'l3'}" >_l</c:if>.png" border="0"></a><a href="video.jsp?quality=l4"><img src="css/images/1080p<c:if test="${param.quality == 'l4'}" >_l</c:if>.png" border="0"></a> </div>
                                    </td>
                                    <!--td nowrap>
							<img id="like_img" src="./images/like.png" border="0" alt="Like" title="Like" height="20" onMouseOver="change_cursor2pointer(this);" onclick="like();"><img id="dislike_img" src="./images/dislike.png" border="0" alt="disLike" title="disLike" height="20" onMouseOver="change_cursor2pointer(this);" onclick="like(-1);">
						</td-->
                                    
                                    <!--td width="35%" nowrap><table cellpadding="0" cellspacing="0" class="forumnone">
							<tr>
								<td align="center"><div id="like_value" class="gen" style="color: green;"></div></td>
								<td align="center"><div id="dislike_value" class="gen" style="color: red;"></div></td>
							</tr>
							<tr>
								<td id="like_cell" width="%" align="bottom" title="Like: %"><div style="height: 3px; border-bottom: 4px solid green"></div></td>
								<td id="dislike_cell" width="%" align="bottom" title="disLike: %"><div style="height: 3px; border-bottom: 4px solid red"></div></td>
							</tr>
						</table></td-->
                                    <td width="5%">&nbsp;</td>
                                </tr>
                                <tr height="5">
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="pl_center">
                        <div class="pl-c1">

                            <div style="position: relative; margin: 0px 0px 0px 0px; float: left; clear: left; width: 300px;">

                                <div class="gensmall" style="position: relative; float: right; display: inline;"><a href=""><img src="" width="128" height="72" border="0" align="right"</a><div style="position: absolute; color: #FFFFFF; background: #000000; bottom: 0px; right: 0px"></div></div>
                                <h1 class="viewtitle">${song.name}</h1>

                                <a href=""><img src="css/images/button_remove.gif" width="75" height="22" alt="Xóa" border="0"></a><a href="" target="_blank"><img src="css/images/button_download.gif" width="75" height="22" alt="Downloads" border="0"></a><br />
                               



                                <!--div id="note" style="display: block; color: #888888">
                                    <div class="pltip"><div class="tip-cpl" style="margin-top: 10px">
                                            <div class="vt1"></div>
                                            <div class="vt2"></div>
                                            <div class="vt3"></div>
                                            <div class="vt4"></div>
                                            <div class="note-text">
                                                <img src="css/images/warning.gif" width="16" height="16" alt="Warning" align="absmiddle"> <span class="gensmall"  style="color: #888888"><u><b>Ghi chú:</b></u> Video clip <strong>Gentleman</strong> do ca sĩ <strong>PSY</strong> trình bày mà bạn đang xem có chất lượng hình ảnh cao nhất là <i><span style="color: red">HD 1080p</span></i>. Bạn được phép nghe trực tuyến <b>Gentleman</b>, download <u>Gentleman</u> về máy và xem lyrics <i>Gentleman</i> hoàn toàn miễn phí. <span class="seohide">The video clip <b>Gentleman</b> by singer <b>PSY</b> shows that you are viewing with the highest possible image quality is <i><span style="color: red">HD 1080p</span></i>. You are allowed to listen online <strong>Gentleman</strong>, download <u>Gentleman</u> to your machine and see the lyrics <i>Gentleman</i> is free.</span>  </span>
                                            </div>
                                        </div></div>
                                </div-->

                            </div>

                        </div>
                    </div>
                    <div class="pl-cr">
                        <div class="tip-cp4">
                            <div class="vt1"></div>
                            <div class="vt2"></div>
                            <div class="vt3"></div>
                            <div class="vt4"></div>
                            <div class="tip-text">

                                <div id="fulllyric" style="font-size: 13px; overflow: auto;">
                                    <span class="maintitle"><strong><a href="">${song.name}</a></strong></span><br />
                                    <span class="genmed">
                                        <u>Ca sĩ:</u> <b><a href="">${song.artists.artistName}</a></b><br />
                                        <u>Sáng tác:</u> <b><a href="">${song.musicians.musicianName}</a></b><br />
                                        <u>Sản xuất:</u> <b>${song.producers.producerName}</b><br />
                                    </span>

                                    <p class="genmed" style="font-size: 13px; overflow: hidden;" id="fulllyric">${song.lyrics}</p>
                                </div>
                                <div id="morelyric" style="cursor:pointer" onclick="show_fulllyric();" class="gen" align="right"></div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="css/javascript/jquery.min.js"></script>
    <script src="css/javascript/jquery-ui.min.js"></script>
    <script src="css/javascript/jquery.tmpl.min.js"></script>
    <script language="JavaScript" type="text/javascript">
    <!--
    window.___gcfg = { lang: 'vi' };

    (function () {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();

    var lyric_expand = '<p>Xem thêm lời bài hát <img src="css/images/csn/xt3.gif"></p>';
    var lyric_collapse = '<p>Thu gọn <img src="css/images/csn/xt4.gif"></p>';
    function show_fulllyric() {
        if (document.getElementById('morelyric').innerHTML == lyric_expand) {
            document.getElementById('fulllyric').setAttribute('style', "font-size: 13px; overflow: auto;");
            document.getElementById('morelyric').innerHTML = lyric_collapse;
        }
        else if (document.getElementById('fulllyric').offsetHeight > 330) {
            document.getElementById('fulllyric').setAttribute('style', "font-size: 13px; max-height: 300px; overflow: hidden;");
            document.getElementById('morelyric').innerHTML = lyric_expand;
        }
    }
    show_fulllyric();

    function show_hide_share() {
        if (document.getElementById("share").style.display == "none") {
            document.getElementById("share").style.display = "block";
        }
        else {
            document.getElementById("share").style.display = "none";
        }
    }


    function select_all(obj) {
        var text_val = eval(obj);
        text_val.focus();
        text_val.select();
        if (!document.all) return; // IE only
        r = text_val.createTextRange();
        r.execCommand('copy');
    }

    /*
        var liked = ;
        var disliked = ;
        var d = new Date();
        var current_time = d.getTime();
        function like(mode)
        {
        if (liked || disliked)
        {
        return;
        }

        var d2 = new Date();
        var current_time2 = d2.getTime();
        if ( (current_time2 - current_time) / 1000 < 5 )
        {
        alert('Ban chua nghe xong bai hat nay!');
        current_time = current_time2;
        return;
        }

        (mode == -1) ? disliked = true : liked = true;
        $.post("http://chiasenhac.com/like.php?m=1081483", {
        mode: (mode == -1) ? 'dislike' : 'like',
        },
        function(data){
        // Success
        if (mode == -1)
        {
        document.getElementById('dislike_img').src = "./images/disliked.png";
        document.getElementById('dislike_value').innerHTML =  + 1;
        //$("#dislike_cell").width('30%');
        //$("#like_cell").width('70%');
        var like_percent = Math.round(1000 *  / ( +  + 1)) / 10;
        var dislike_percent = 100 - like_percent;
        disliked = true;
        }
        else
        {
        document.getElementById('like_img').src = "./images/liked.png";
        document.getElementById('like_value').innerHTML =  + 1;
        var dislike_percent = Math.round(1000 *  / ( +  + 1)) / 10;
        var like_percent = 100 - dislike_percent;
        liked = true;
        }
        document.getElementById('like_cell').width = like_percent.toString() + '%';
        document.getElementById('dislike_cell').width = dislike_percent.toString() + '%';
        document.getElementById('like_cell').title = 'Like: ' + like_percent.toString() + '%';
        document.getElementById('dislike_cell').title = 'disLike: ' + dislike_percent.toString() + '%';
        });
        }

        if (liked) document.getElementById('like_img').src = "./images/liked.png";
        if (disliked) document.getElementById('dislike_img').src = "./images/disliked.png";
        var dislike_percent = ( +  > 0) ? Math.round(1000 *  / ( + )) / 10 : 50;
        var like_percent = 100 - dislike_percent;
        document.getElementById('like_cell').width = like_percent.toString() + '%';
        document.getElementById('dislike_cell').width = dislike_percent.toString() + '%';
        document.getElementById('like_cell').title = 'Like: ' + like_percent.toString() + '%';
        document.getElementById('dislike_cell').title = 'disLike: ' + dislike_percent.toString() + '%';

        function change_cursor2pointer(obj)
        {
        if (!liked && !disliked)
        {
        obj.style.cursor = 'pointer';
        }
        else if (obj.style.cursor == 'pointer')
        {
        obj.style.cursor = 'default';
        }
        } */

    //-->
    </script>

    <div class="left-cm"><div class="hotman">
            <div class="b1"></div><div class="b2"></div><div class="b3"></div><div class="b4"></div>
            <div class="pad" style="padding-bottom: 10px"><div class="h-main"><div class="page-dsms" style="margin-top: 0px"><div class="bod">
                            <div class="vt11"></div><div class="vt21"></div><div class="vt31"></div><div class="vt41"></div>


                            <table cellspacing="0" cellpadding="0">
                                <tr height="30">
                                    <td colspan="5" align="center"><span class="viewtitle"><b>${song.name} - ${song.artists.artistName}</b></span></td>
                                </tr>
                                <tr>

                                    <td width="32%" valign="top">

                                        <table cellpadding="2" cellspacing="1" width="100%" class="tbtable">
                                            <tr>
                                                <th class="catLeft" height="25" align="center" colspan="2"><span class="cattitle">Cùng ca sĩ</span></th>
                                            </tr>
                                            <c:forEach var="sa" items="${SAMEARTIST}" varStatus="counter">
                                                <tr class="${(counter.count mod 2)+1}" >
                                                    <td align="center" width="50" nowrap><span class="gen">${counter.count}</span></td>
                                                    <td><div class="musicinfo">
                                                            <a href="ControllerServlet?btnAction=Listen&type=video&id=${sa.songID}&quality=l3" class="musictitle" title="${sa.name} - ${sa.artists.artistName}">${sa.name}</a>
                                                            <p class="gen">${sa.artists.artistName}</p>
                                                        </div></td>
                                                </tr>
                                            </c:forEach>
                                        </table>
                                        <div align="right" class="gensmall"><a href="ControllerServlet?btnAction=Search&searchValue=${song.artists.artistName}&type=Artist" title="Cùng ca sĩ ${song.artists.artistName}">Xem thêm...</a></div>

                                    </td>

                                    <td width="2%"> </td>

                                    <td width="32%" valign="top">

                                        <table cellpadding="2" cellspacing="1" width="100%" class="tbtable">
                                            <tr>
                                                <th class="catLeft" height="25" align="center" colspan="2"><span class="cattitle">Bài hát liên quan</span></th>
                                            </tr>
                                            <c:forEach var="sa" items="${RELATIVESONG}" varStatus="counter">
                                                <tr class="${(counter.count mod 2)+1}" >
                                                    <td align="center" width="50" nowrap><span class="gen">${counter.count}</span></td>
                                                    <td><div class="musicinfo">
                                                            <a href="ControllerServlet?btnAction=Listen&type=music&id=${sa.songID}&quality=l3" class="musictitle" title="${sa.name} - ${sa.artists.artistName}">${sa.name}</a>
                                                            <p class="gen">${sa.artists.artistName}</p>
                                                        </div></td>
                                                </tr>
                                            </c:forEach>
                                        </table>
                                        <div align="right" class="gensmall"><a href="ControllerServlet?btnAction=Search&searchValue=${song.name}&type=none" title="Bài hát liên quan Gentleman">Xem thêm...</a></div>

                                    </td>

                                    <td width="2%"> </td>

                                    <td width="32%" valign="top">

                                        <table cellpadding="2" cellspacing="1" width="100%" class="tbtable">
                                            <tr>
                                                <th class="catLeft" height="25" align="center" colspan="2"><span class="cattitle">Cùng thể loại</span></th>
                                            </tr>
                                            <c:forEach var="sa" items="${SAMEGENRE}" varStatus="counter">
                                                <tr class="${(counter.count mod 2)+1}" >
                                                    <td align="center" width="50" nowrap><span class="gen">${counter.count}</span></td>
                                                    <td><div class="musicinfo">
                                                            <a href="ControllerServlet?btnAction=Listen&type=video&id=${sa.songID}&quality=l3" class="musictitle" title="${sa.name} - ${sa.artists.artistName}">${sa.name}</a>
                                                            <p class="gen">${sa.artists.artistName}</p>
                                                        </div></td>
                                                </tr>
                                            </c:forEach>
                                        </table>
                                        <div align="right" class="gensmall"><a href="ControllerServlet?btnAction=Search&searchValue=${song.genres.genreName}&type=none">Xem thêm...</a></div>

                                    </td>

                                </tr>
                            </table>

                        </div></div></div></div></div></div>

    <div id="comments_body">                    <div class="left-cm" style="margin-top: 10px">
            <div class="hotman">
                <div class="b1">
                </div>
                <div class="b2">
                </div>
                <div class="b3">
                </div>
                <div class="b4">
                </div>
                <div class="pad" style="padding-bottom: 10px">
                    <div class="h-main">
                        <div class="md-top">
                            <div class="md-t">
                                Cảm nhận: ${song.name} </div>
                            <div id="write_comment_txt" class="md-c">
                                <img src="css/images/tain6.gif" />
                                <span><a href="javascript:void(0);" onclick="show_post_form();" class="nav">Viết cảm nhận</a></span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <a name="comment_postfrm"></a>
        <div class="left-cm" id="write_comment" style="margin-top: 10px; display: none;">
            <div class="hotman">
                <div class="b1">
                </div>
                <div class="b2">
                </div>
                <div class="b3">
                </div>
                <div class="b4">
                </div>
                <div class="pad" style="padding-bottom: 10px">
                    <div class="h-main">
                        <textarea id="message" name="message" rows="4" wrap="virtual" style="width:663px; height:80px; float:left;	border-bottom:1px solid #DCDCDC; margin-top:5px;" maxlength="2000" class="post"></textarea>
                        <div class="titd">
                            <p class="gui"><input id="post_comment" name="post_comment" onclick="post_comment();" type="button" class="btgui" value="" /></p>
                        </div>
                    </div>
                    <div align="right" class="point" id="post_comment_note"></div>
                </div>
            </div>
        </div>


        <script language="JavaScript" type="text/javascript">
        <!--

        function show_post_form()
        {
            document.getElementById('write_comment').style.display = 'inline';
            document.getElementById('write_comment_txt').style.display = 'none';
            location.hash = "#comment_postfrm";
        }

        function ltrim(str, chars) {
            chars = chars || "\\s";
            return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
        }

        function rtrim(str, chars) {
            chars = chars || "\\s";
            return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
        }

        function trim(str, chars) {
            return ltrim(rtrim(str, chars), chars);
        }

        function post_comment()
        {
            if ( document.getElementById('post_comment').disabled == true )
            {
                return;
            }
            document.getElementById('post_comment').disabled = true;
            document.getElementById('post_comment').value = 'Đang gởi lên...';

            var message	= document.getElementById('message') ? trim(document.getElementById('message').value) : '';
            if (!message) {
                document.getElementById('post_comment_note').innerHTML = 'Chưa có nội dung';
            }
            else if (message.length < 10) {
                document.getElementById('post_comment_note').innerHTML = 'Nội dung quá ngắn';
            }
            else {

                $.post("http://chiasenhac.com/comment_post.php?m=1081483", {
                    message: message,
                },
                function(data){
                    if ( data == 'NOT_LOGIN' )
                    {
                        // Redirect to login page
                        window.location = 'login.php?redirect=hd/video/k-video/gentleman~psy~1081483.html';
                    }
                    else if (data.length < 100)
                    {
                        document.getElementById('post_comment_note').innerHTML = data;
                        document.getElementById('post_comment').disabled = false;
                        document.getElementById('post_comment').value = 'Gởi';
                    }
                    else
                    {
                        // Success
                        document.getElementById('comments_body').innerHTML = data;
                    }
                });

                return;
            }

            document.getElementById('post_comment').disabled = false;
            document.getElementById('post_comment').value = '';//'Gởi';
        }

        function show_all()
        {
            $.post("http://chiasenhac.com/comment.php?m=1081483", {
                max_comment: 0,
            },
            function(data){
                // Success
                document.getElementById('comments_body').innerHTML = data;
                window.location.hash = "view_comment";
            });
        }

        //-->
        </script>


    </div>

</div>
<jsp:include page="mainRight.jsp"/>
<jsp:include page="footer.jsp"/>
